<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    name: string
    size: number
    unit?: 'px' | 'rem' | 'em' | 'vw' | 'vh'
    color?: string
  }>(),
  {
    size: 14,
    unit: 'px',
    color: ''
  }
)

const isEleIcon = computed(() => {
  return props.name.startsWith('ele-')
})
</script>

<template>
  <ElIcon v-if="isEleIcon" :size="size" :color="color">
    <component :is="name" />
  </ElIcon>

  <svg v-else aria-hidden="true" :width="`${size}${unit}`" :height="`${size}${unit}`">
    <use :xlink:href="`#icon-svg-${name}`" :fill="color" />
  </svg>
</template>
